<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <button>stop</button>
        <!-- <h2>h2222</h2>
        <h1>我是h1</h1> -->
        <div id="box" style="background: red; width: 100px; height: 100px">
            <!-- <p>我是p</p>
            <h2>我是h2</h2>
            <h2>我是第二个h2</h2> -->
        </div>
        <!-- <div class="hi">我hi</div>
        <h2>h2222</h2>
        <div>sss</div> -->
        <button>显示/隐藏</button>
    </body>
    <script src="./jquery-3.6.1.js"></script>
    <script>
        $(function () {
            // $('button').click(() => {
            //     $('#box').slideToggle()
            // })
            $('button:first').click(() => {
                $('#box').stop(false, true)
            })
            $('button:last').click(function () {
                var div = $('#box')
                div.animate({ height: '300px', opacity: '0.4' }, 5000)
                div.animate({ width: '300px', opacity: '0.8' }, 5000)
                div.animate({ height: '100px', opacity: '0.4' }, 5000)
                div.animate({ width: '100px', opacity: '0.8' }, 5000)
            })
        })

        // document.getElementById('box').previousElementSibling
        // let btn2 = $('<button>嘉实多</button>')
        // let btn3 = $('<button>wqe</button>')
        // $('#box').append(btn2).append(btn3)
        // console.log($('div').not('.hi'))
        // $('h2').click(function () {
        //     console.log($(this).index())
        // })
        // $('#box').children('h2').html('我是h22222')
    </script>
</html>
